<template>
	<view>
		<view class="header">
			<view>
				<input type="text" v-model="productName" placeholder="输入商品名称" placeholder-class="placeholder" class="input" :focus="focus"/>
			    <image src="@/static/search.png" class="search"></image>
			</view>
			<text @tap="add">新建商品</text>
		</view>
		<view class="nav">
			<view class="navBar" v-for="(item, index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view v-if="isActive==0">
			<fenlei></fenlei>
		</view>
		<view v-if="isActive==1">
			<fenlei></fenlei>
		</view>
		<view v-if="isActive==2">
			<fenlei></fenlei>
		</view>
		<view v-if="isActive==3">
			<fenlei></fenlei>
		</view>
	</view>
</template>
<script>
import fenlei from '../../components/fenlei/fenlei.vue'
export default {
	components:{ fenlei },
	data(){
		return {
			productName:'',
			isActive:0,
			navList:[
			{
				index:0,
				title:'在售中'
			},
			{
				index:1,
				title:'待审核'
			},
			{
				index:2,
				title:'仓库中'
			},
			{
				index:3,
				title:'违规下架'
			}]
		}
	},
	methods:{
		checked(index){
			this.isActive = index
		},
		add(){
			uni.navigateTo({
				url:"../add/add"
			})
		}
	}
}
</script>
<style lang="scss">
	page {
		background: rgb(245, 245, 245);
	}
	.header {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text {
			margin-right: 30rpx;
			margin-left: auto;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #1A1A1A;
		}
	}
	.input {
		width: 475rpx;
		height: 60rpx;
		background: #EEEEEE;
		border-radius: 30rpx;
		margin-left: 30rpx;
		position: relative;
		padding-left: 72rpx;
	}
	.search {
		width: 22rpx;
		height: 24rpx;
		position: absolute;
		left: 60rpx;
		top: 30rpx;
	}
	.placeholder {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}
	.nav {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.nav .navBar {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #666666;
	}
	.active {
		position: relative;
		color: #1B1B1B;
	}
</style>
